<template>
  <div v-if="!isLogin" class="login_dialog_container">
    <div v-if="isShowLogin" class="dialog">
      <div class="title_box">
        <div>Sign In</div>
        <img @click="closeDialog" src="@/assets/common/close.png">
      </div>
      <div class="form_area">
        <div class="form_item">
          <div class="label">E-mail</div>
          <div class="value">
            <img src="@/assets/dialog/lock.png">
            <input v-model="loginData.email" placeholder="Enter Your E-mail"/>
          </div>
        </div>
        <div class="form_item">
          <div class="label">Password</div>
          <div class="value">
            <img src="@/assets/dialog/message.png">
            <input v-model="loginData.password" placeholder="Enter Your Password"/>
          </div>
        </div>
      </div>
      <div class="text_box">
        <div @click="showRegis">Don't have an account?<span class="green_text">Sign up</span></div>
        <div @click="showForget" class="green_text">Forget Password</div>
      </div>
      <button @click="toLogin">Sign In</button>
    </div>

    <div v-if="isShowRegis" class="regis-dialog">
      <div class="title_box">
        <div>Sign Up</div>
        <img @click="closeDialog" src="@/assets/common/close.png">
      </div>
      <div class="form_area">
        <div class="form_item half">
          <div class="label">
            <text class="required">*</text>
            Name
          </div>
          <div class="value">
            <input v-model="regisDto.userName" placeholder="Enter Your Name"/>
          </div>
        </div>
        <div class="form_item half">
          <div class="label">
            <text class="required">*</text>
            Gender
          </div>
          <div class="value">
            <select-box :options="genderEnumObj.getLabelAndValues()" v-model="regisDto.gender"
            ></select-box>
          </div>
        </div>
        <div class="form_item">
          <div class="label">
            <text class="required">*</text>
            Company
          </div>
          <div class="value">
            <input v-model="regisDto.company" placeholder="Enter Your Company"/>
          </div>
        </div>
        <div class="form_item half">
          <div class="label">
            <text class="required">*</text>
            Industry
          </div>
          <div class="value">
            <select-mul-box :options="industryOptions" v-model="regisDto.industry"
                            labelKey="dictLabel" valueKey="dictValue"></select-mul-box>
          </div>
        </div>
        <div class="form_item half">
          <div class="label">
            <text class="required">*</text>
            Job Title
          </div>
          <div class="value">
            <input v-model="regisDto.position" placeholder="Enter Your Job title"/>
          </div>
        </div>
        <div class="form_item half">
          <div class="label">
            <text class="required">*</text>
            E-mail
          </div>
          <div class="value">
            <input v-model="regisDto.email" placeholder="Enter Your E-mail"/>
          </div>
        </div>
        <div class="form_item half">
          <div class="label">
            <text class="required">*</text>
            Nationality
          </div>
          <div class="value">
            <select-box :options="nationalityList" v-model="regisDto.nationality"
                        labelKey="countryName" valueKey="countryCode" :isShowFront="true" frontLabel="telephonePrefix">
            </select-box>
          </div>
        </div>
        <div class="form_item half">
          <div class="label">Description</div>
          <div class="value">
            <input v-model="regisDto.remark" placeholder="Enter Your Description"/>
          </div>
        </div>
        <div class="form_item half">
          <div class="label">
            <text class="required">*</text>
            Phone
          </div>
          <div class="value">
            <input v-model="regisDto.phoneNumber" placeholder="Enter Your Phone"/>
          </div>
        </div>
        <!--密码-->
        <div class="form_item half">
          <div class="label">
            <text class="required">*</text>
            Password
          </div>
          <div class="value">
            <input v-model="regisDto.password" placeholder="Enter Your Password"/>
          </div>
        </div>
        <!--验证码-->
        <div class="form_item half">
          <div class="label">
            <text class="required">*</text>
            Verification Code
          </div>
          <div class="value">
            <input v-model="regisDto.verifyCode" placeholder="Enter Your Verification Code"/>
            <div
              @click="toSendRegisCode"
              class="resend-btn"
              :class="{ disabled: countdown > 0 }"
              :disabled="countdown > 0"
            >
              {{ countdown > 0 ? `${countdown}` : 'Resend' }}
            </div>
          </div>
        </div>
      </div>
      <button @click="toRegis">Sign Up</button>
      <div @click="showLogin" class="text_box">
        <div>I Already have an account?<span class="green_text">Sign in</span></div>
      </div>
    </div>

    <div class="mask"></div>

    <!--引入忘记密码弹窗-->
    <forget-password-dialog v-if="isShowForget"></forget-password-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, defineEmits, onMounted, onBeforeUnmount} from "vue";
import {useDictStore, useLoginCheckStore} from "@/store/index.js"
import {
  storeToRefs
} from 'pinia';
import UserAPI from "@/api/user"
import {ResultEnum} from "@/enums/ResultEnum.js";
import {genderEnumObj} from "@/utils/enum.js"
import {useUserStore} from "@/store/index.js";

const userStore = useUserStore()

console.log(
  genderEnumObj.getLabelAndValues(), "genderEnumObj"
)

let loginCheckStore = useLoginCheckStore()

const {
  isLogin
} = storeToRefs(loginCheckStore);

// 定义要触发的事件
const emit = defineEmits(['loginSuccess', 'close']);

const value = ref("")

// 定义一个方法来触发事件
function closeDialog() {
  loginCheckStore.setIsLogin(true)
  emit('close');
}

const loginData = ref({
  email: "",
  password: ""
})

//注册所需要的参数
const regisDto = ref({
  userName: "",//姓名
  gender: "",//性别
  company: "",//公司名称
  industry: "",//行业
  position: "",//职位
  email: "", //邮箱
  nationality: "", //国籍
  remark: "",//备注
  phoneNumber: "", //手机号
  verifyCode: "" //注册时所需验证码
})


/**
 * 注册模块
 * */
onMounted(() => {
  //获取国籍数据列表
  toGetNationalityList()
  //获取行业字典数据列表
  toGetDictData()
})

//获取国籍列表
const nationalityList = ref([])

async function toGetNationalityList() {
  let res = await UserAPI.getNationalityList({pageNum: 1, pageSize: 1000})
  if (res.code == ResultEnum.SUCCESS) {
    nationalityList.value = res.data.rows
  }
}


const industryOptions = ref([])

async function toGetDictData() {
  let res = await UserAPI.getDictData("user_industry")
  if (res.code == ResultEnum.SUCCESS) {
    industryOptions.value = res.data
  }
}

//账户注册
async function toRegis() {
  regisDto.value.industry = regisDto.value.industry.toString()
  const res = await UserAPI.regisUser(regisDto.value)
  console.log(res, "res是什么")
  if (res.code === ResultEnum.SUCCESS) {
    ElMessage.success("注册成功")
    //注册成功后跳转到登录页面
    isShowLogin.value = true
  }
}


const countdown = ref(0);
let timer = null;

// 注册时发送验证码
async function toSendRegisCode() {
  regisDto.value.industry = regisDto.value.industry.toString()
  if (!regisDto.value.email) {
    return ElMessage.warning("接收验证码的邮箱不能为空")
  }
  if (countdown.value > 0) return;

  try {
    const res = await UserAPI.regisSendCode(regisDto.value);
    if (res.code === ResultEnum.SUCCESS) {
      ElMessage.success(`已发送验证码，请前往邮箱查收`);
      // 开始倒计时
      countdown.value = 60;
      timer = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    }
  } catch (error) {
    ElMessage.error('发送验证码失败');
    console.error(error);
  }
}


// 组件卸载时清除定时器
onBeforeUnmount(() => {
  if (timer) clearInterval(timer);
});

//账户登录
async function toLogin() {
  const res = await UserAPI.login(loginData.value)
  console.log(res, "res是什么")
  if (res.code == 200) {
    ElMessage.success("登录成功")
    //获取用户个人信息 存入store缓存总
    let userRes = await userStore.getUserInfo()
    if(userRes.id){
      loginCheckStore.setIsLogin(true)
      // 强制刷新页面（包括所有资源）
      window.location.reload()
    }
  }
}

const isShowForget = ref(false)
const isShowRegis = ref(false)
const isShowLogin = ref(true)

//展示修改密码框
function showForget() {
  isShowForget.value = true
  isShowRegis.value = false
  isShowLogin.value = false
}

//展示登录框
function showLogin() {
  isShowLogin.value = true
  isShowForget.value = false
  isShowRegis.value = false
}

//展示注册框
function showRegis() {
  isShowRegis.value = true
  isShowLogin.value = false
  isShowForget.value = false

}


</script>

<style lang="scss" scoped>
.login_dialog_container {
  padding: 24px;
  background-color: #fff;
  border-radius: 24px;
}

.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 100;
  padding: 24px;
  border-radius: 24px;

  .title_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24px;
    font-weight: bold;
    line-height: 32px;
    color: #1C1E24;

    img {
      width: 24px;
      height: 24px;
    }
  }

  .form_area {
    margin-top: 24px;

    .form_item {
      margin-bottom: 16px;

      .label {
        font-size: 16px;
        font-weight: normal;
        line-height: 24px;
        letter-spacing: normal;
        color: #808690;
        margin-bottom: 8px;
      }

      .value {
        width: 432px;
        height: 40px;
        background: #F0F2F7;
        display: flex;
        align-items: center;
        padding: 10px 12px;
        box-sizing: border-box;
        border-radius: 8px;

        input {
          border: none;
          outline: none;
          background: none;
          box-shadow: none;
          padding: 0;
          margin: 0;
          border-radius: 0;
          font-family: inherit;
          font-size: inherit;
          font-weight: inherit;
          color: inherit;
          width: auto;
          height: auto;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
        }

        img {
          width: 20px;
          height: 20px;
          margin-right: 8px;
        }
      }
    }

    .form_item:last-child {
      margin-bottom: 0;
    }
  }

  .text_box {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    text-align: right;
    letter-spacing: normal;
    justify-content: space-between;
    color: #1C1E24;
    margin-top: 24px;
  }

  .green_text {
    color: #1e90ff;
    margin-left: 8px;
  }

  button {
    border-radius: 8px;
    background: #1e90ff;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    text-align: center;
    letter-spacing: normal;
    color: #FFFFFF;
    width: 100%;
    padding: 8px 16px;
    margin-top: 24px;
  }
}


.regis-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 20;
  padding: 24px;
  border-radius: 24px;


  .title_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24px;
    font-weight: bold;
    line-height: 32px;
    color: #1C1E24;

    img {
      width: 24px;
      height: 24px;
    }
  }

  .form_area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 432px;
    margin-top: 24px;

    .form_item {
      margin-top: 16px;
      width: 100%;

      .label {
        font-size: 16px;
        font-weight: normal;
        line-height: 24px;
        letter-spacing: normal;
        color: #808690;
        margin-bottom: 8px;

        .required {
          color: red;
        }
      }

      .value {
        background: #F0F2F7;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: normal;
        color: #1C1E24;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;

        input {
          width: 100%;
          border: none;
          outline: none;
          background: none;
          box-shadow: none;
          margin: 0;
          font-family: inherit;
          font-size: inherit;
          font-weight: inherit;
          color: inherit;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          padding: 8px 12px;
          border-radius: 8px;
        }

        /**发送按钮*/
        .resend-btn {
          padding: 0 12px;
          font-size: 16px;
          line-height: 24px;
          color: #1e90ff;
        }

        .resend-btn.disabled {
          cursor: not-allowed;
          color: #c0c4cc;
        }

        img {
          width: 20px;
          height: 20px;
          margin-right: 8px;
        }

        ::v-deep .el-select__wrapper {
          padding: 6px 12px !important;
          box-sizing: border-box;
          border-radius: 8px;
          background: #F0F2F7;
          box-shadow: none;
          font-size: 14px;
          line-height: 20px;
          color: #808690;

          ::v-deep .el-select__selection .el-select__selected-item .el-select__selected-item span {
            color: pink !important;
          }
        }


        .el-select-dropdown-item {
          // 修改当前选中选项的文字显示颜色
          color: pink !important;
        }
      }
    }

    form_item:first-child {
      margin-top: 0;
    }

    .half {
      width: 48%;
    }
  }

  .text_box {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    text-align: right;
    letter-spacing: normal;
    justify-content: center;
    color: #1C1E24;
    margin-top: 24px;
  }

  .green_text {
    color: #1e90ff;
    margin-left: 8px;
  }

  button {
    border-radius: 8px;
    background: #1e90ff;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    text-align: center;
    letter-spacing: normal;
    color: #FFFFFF;
    width: 100%;
    padding: 8px 16px;
    margin-top: 24px;
  }

}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, .4);
  width: 100%;
  height: 100%;
  z-index: 10;
}


</style>
